<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="smohan">
	<meta name="homepage" content="https://smohan.im">

	<title>MoCss - 水墨寒的博客</title>
	<link rel="stylesheet" href="../css/mo.css">
	<link rel="stylesheet" href="demo.css">
	<style type="text/css">
		fieldset {
			margin-bottom: 1rem;
		}
	</style>
</head>
<body>

	<article class="demo">
		<a class="demo-back mo-button--fluid mo-button--primary" href="index.html">目录</a>
		<h1 class="demo-title">Mo-Radio | Mo-Checkbox | Mo-Switch</h1>
		<aside class="demo-description"></aside>
		<section class="demo-main">
			<form>
				<fieldset>
					<label class="mo-radio">
						<input type="radio" name="mo-radio">
						<i class="icon"></i>
						<span>radio</span>
					</label>
					<label class="mo-radio">
						<input type="radio" name="mo-radio" checked>
						<i class="icon"></i>
						<span>radio</span>
					</label>
					<label class="mo-radio">
						<input type="radio" name="mo-radio" disabled>
						<i class="icon"></i>
						<span>radio</span>
					</label>
				</fieldset>

				<fieldset>
					<label class="mo-radio--primary">
						<input type="radio" name="mo-radio--primary">
						<i class="icon"></i>
						<span>radio</span>
					</label>
					<label class="mo-radio--primary">
						<input type="radio" name="mo-radio--primary" checked>
						<i class="icon"></i>
						<span>radio</span>
					</label>
					<label class="mo-radio--primary">
						<input type="radio" name="mo-radio--primary" disabled>
						<i class="icon"></i>
						<span>radio</span>
					</label>
				</fieldset>

				<fieldset>
					<label class="mo-radio--negative">
						<input type="radio" name="mo-radio--negative">
						<i class="icon"></i>
						<span>radio</span>
					</label>
					<label class="mo-radio--negative">
						<input type="radio" name="mo-radio--negative" checked>
						<i class="icon"></i>
						<span>radio</span>
					</label>
					<label class="mo-radio--negative">
						<input type="radio" name="mo-radio--negative" disabled>
						<i class="icon"></i>
						<span>radio</span>
					</label>
				</fieldset>

				<fieldset>
					<label class="mo-radio--positive">
						<input type="radio" name="mo-radio--positive">
						<i class="icon"></i>
						<span>radio</span>
					</label>
					<label class="mo-radio--positive">
						<input type="radio" name="mo-radio--positive" checked>
						<i class="icon"></i>
						<span>radio</span>
					</label>
					<label class="mo-radio--positive">
						<input type="radio" name="mo-radio--positive" disabled>
						<i class="icon"></i>
						<span>radio</span>
					</label>
				</fieldset>

				<br/>
				<br/>

				<fieldset>
					<label class="mo-checkbox">
						<input type="checkbox" name="mo-checkbox">
						<i class="icon"></i>
						<span>checkbox</span>
					</label>
					<label class="mo-checkbox">
						<input type="checkbox" name="mo-checkbox" checked>
						<i class="icon"></i>
						<span>checkbox</span>
					</label>
					<label class="mo-checkbox">
						<input type="checkbox" name="mo-checkbox" disabled>
						<i class="icon"></i>
						<span>checkbox</span>
					</label>
				</fieldset>

				<fieldset>
					<label class="mo-checkbox--primary">
						<input type="checkbox" name="mo-checkbox--primary">
						<i class="icon"></i>
						<span>checkbox</span>
					</label>
					<label class="mo-checkbox--primary">
						<input type="checkbox" name="mo-checkbox--primary" checked>
						<i class="icon"></i>
						<span>checkbox</span>
					</label>
					<label class="mo-checkbox--primary">
						<input type="checkbox" name="mo-checkbox--primary" disabled>
						<i class="icon"></i>
						<span>checkbox</span>
					</label>
				</fieldset>

				<fieldset>
					<label class="mo-checkbox--negative">
						<input type="checkbox" name="mo-checkbox--negative">
						<i class="icon"></i>
						<span>checkbox</span>
					</label>
					<label class="mo-checkbox--negative">
						<input type="checkbox" name="mo-checkbox--negative" checked>
						<i class="icon"></i>
						<span>checkbox</span>
					</label>
					<label class="mo-checkbox--negative">
						<input type="checkbox" name="mo-checkbox--negative" disabled>
						<i class="icon"></i>
						<span>checkbox</span>
					</label>
				</fieldset>

				<fieldset>
					<label class="mo-checkbox--positive">
						<input type="checkbox" name="mo-checkbox--positive">
						<i class="icon"></i>
						<span>checkbox</span>
					</label>
					<label class="mo-checkbox--positive">
						<input type="checkbox" name="mo-checkbox--positive" checked>
						<i class="icon"></i>
						<span>checkbox</span>
					</label>
					<label class="mo-checkbox--positive">
						<input type="checkbox" name="mo-checkbox--positive" disabled>
						<i class="icon"></i>
						<span>checkbox</span>
					</label>
				</fieldset>

				<br/>
				<br/>

				<fieldset>
					<label class="mo-switch">
						<input type="checkbox" name="mo-switch">
						<i class="icon"></i>
						<span>switch</span>
					</label>
					<label class="mo-switch">
						<input type="checkbox" name="mo-switch" checked>
						<i class="icon"></i>
						<span>switch</span>
					</label>
					<label class="mo-switch">
						<input type="checkbox" name="mo-switch" disabled>
						<i class="icon"></i>
						<span>switch</span>
					</label>
				</fieldset>

				<fieldset>
					<label class="mo-switch--primary">
						<input type="checkbox" name="mo-switch--primary">
						<i class="icon"></i>
						<span>switch</span>
					</label>
					<label class="mo-switch--primary">
						<input type="checkbox" name="mo-switch--primary" checked>
						<i class="icon"></i>
						<span>switch</span>
					</label>
					<label class="mo-switch--primary">
						<input type="checkbox" name="mo-switch--primary" disabled>
						<i class="icon"></i>
						<span>switch</span>
					</label>
				</fieldset>

				<fieldset>
					<label class="mo-switch--negative">
						<input type="checkbox" name="mo-switch--negative">
						<i class="icon"></i>
						<span>switch</span>
					</label>
					<label class="mo-switch--negative">
						<input type="checkbox" name="mo-switch--negative" checked>
						<i class="icon"></i>
						<span>switch</span>
					</label>
					<label class="mo-switch--negative">
						<input type="checkbox" name="mo-switch--negative" disabled>
						<i class="icon"></i>
						<span>switch</span>
					</label>
				</fieldset>

				<fieldset>
					<label class="mo-switch--positive">
						<input type="checkbox" name="mo-switch--positive">
						<i class="icon"></i>
						<span>switch</span>
					</label>
					<label class="mo-switch--positive">
						<input type="checkbox" name="mo-switch--positive" checked>
						<i class="icon"></i>
						<span>switch</span>
					</label>
					<label class="mo-switch--positive">
						<input type="checkbox" name="mo-switch--positive" disabled>
						<i class="icon"></i>
						<span>switch</span>
					</label>
				</fieldset>


				<fieldset>
					<label class="mo-switch--small">
						<input type="checkbox" name="mo-switch--positive" checked>
						<i class="icon"></i>
						<span>switch small</span>
					</label>
					<label class="mo-switch--primary mo-switch--small">
						<input type="checkbox" name="mo-switch--positive" checked>
						<i class="icon"></i>
						<span>switch small</span>
					</label>
					<label class="mo-switch--positive mo-switch--small">
						<input type="checkbox" name="mo-switch--positive" checked>
						<i class="icon"></i>
						<span>switch small</span>
					</label>
					<label class="mo-switch--negative mo-switch--small">
						<input type="checkbox" name="mo-switch--positive" checked>
						<i class="icon"></i>
						<span>switch small</span>
					</label>
				</fieldset>


				<fieldset>
					<label class="mo-switch--large">
						<input type="checkbox" name="mo-switch--positive" checked>
						<i class="icon"></i>
						<span>switch large</span>
					</label>
					<label class="mo-switch--primary mo-switch--large">
						<input type="checkbox" name="mo-switch--positive" checked>
						<i class="icon"></i>
						<span>switch large</span>
					</label>
					<label class="mo-switch--positive mo-switch--large">
						<input type="checkbox" name="mo-switch--positive" checked>
						<i class="icon"></i>
						<span>switch large</span>
					</label>
					<label class="mo-switch--negative mo-switch--large">
						<input type="checkbox" name="mo-switch--positive" checked>
						<i class="icon"></i>
						<span>switch large</span>
					</label>
				</fieldset>
				<br/>
				<br/>
				<hr>
				<br/>
				<br/>
				<fieldset>
					<label class="mo-switch--large mo-switch--reverse">
						<input type="checkbox" name="mo-switch--reverse" checked>
						<i class="icon"></i>
						<span>switch large reverse</span>
					</label>
					<label class="mo-switch--primary mo-switch--large mo-switch--reverse">
						<input type="checkbox" name="mo-switch--reverse" checked>
						<i class="icon"></i>
						<span>switch large reverse</span>
					</label>
					<label class="mo-switch--positive mo-switch--large mo-switch--reverse">
						<input type="checkbox" name="mo-switch--reverse" checked>
						<i class="icon"></i>
						<span>switch large reverse</span>
					</label>
					<label class="mo-switch--negative mo-switch--large mo-switch--reverse">
						<input type="checkbox" name="mo-switch--reverse" checked>
						<i class="icon"></i>
						<span>switch large reverse</span>
					</label>
				</fieldset>

				<fieldset>
					<label class="mo-switch--reverse">
						<input type="checkbox" name="mo-switch--reverse" checked>
						<i class="icon"></i>
						<span>reverse</span>
					</label>
					<label class="mo-switch--primary mo-switch--reverse">
						<input type="checkbox" name="mo-switch--reverse" checked>
						<i class="icon"></i>
						<span>switch reverse</span>
					</label>
					<label class="mo-switch--positive mo-switch--reverse">
						<input type="checkbox" name="mo-switch--reverse" checked>
						<i class="icon"></i>
						<span>switch reverse</span>
					</label>
					<label class="mo-switch--negative mo-switch--reverse">
						<input type="checkbox" name="mo-switch--reverse" checked>
						<i class="icon"></i>
						<span>switch reverse</span>
					</label>
				</fieldset>

				<fieldset>
					<label class="mo-switch--small mo-switch--reverse">
						<input type="checkbox" name="mo-switch--reverse" checked>
						<i class="icon"></i>
						<span>small reverse</span>
					</label>
					<label class="mo-switch--primary mo-switch--small mo-switch--reverse">
						<input type="checkbox" name="mo-switch--reverse" checked>
						<i class="icon"></i>
						<span>switch small reverse</span>
					</label>
					<label class="mo-switch--positive mo-switch--small mo-switch--reverse">
						<input type="checkbox" name="mo-switch--reverse" checked>
						<i class="icon"></i>
						<span>switch small reverse</span>
					</label>
					<label class="mo-switch--negative mo-switch--small mo-switch--reverse">
						<input type="checkbox" name="mo-switch--reverse" checked>
						<i class="icon"></i>
						<span>switch small reverse</span>
					</label>
				</fieldset>




			</form>
			
		</section>
	</article>

</body>
</html>